<template>
  <div>
    <h3>Music</h3>
    <ol>
      <li v-for="item in musicList" :key="item">{{ item }}</li>
    </ol>
  </div>
</template>

<script>
export default {
  name: "Music",
  // 在路由组件中直接通过props接收动态参数的值
  props: ["id", "times"],
  mounted() {
    //同一组件 渲染不同的页面 并不会重新卸载 重新挂载 因为加载都是同一个
    console.log(this);
  },
  computed: {
    musicList() {
      switch (this.id) {
        case "1":
          return ["华语1", "华语2", "华语3"];
        case "2":
          return ["粤语1", "粤语2", "粤语3"];
        default:
          return [];
      }
    },
  },
};
</script>

<style></style>
